<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>

<head>
    <title>不想起名|文章分类</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%String context = request.getContextPath();%>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="../img/favicon.ico"/>
    <%--<link rel="stylesheet" href="../css/manage.css"/>--%>
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <script src="../js/blog.js"></script>
    <script>
        function deleteCategory(id, count, type) {
            if (confirm("确定删除分类？")) {
                if (count > 0)
                    alert("该分类内含文章，无法删除，您可以删除所有文章再来删除本分类")
                else {
                    $.ajax({
                        type: "POST",
                        async: true,
                        url: "<%=context %>/servlet/CategoryEditServlet",
                        data: {
                            "action": "delete",
                            "type": type,
                            "id": id
                        },
                        success: function (data) {
                            alert(data);
                            window.location.reload();
                        },
                        error: function () {
                            alert("请求失败");
                        },
                        dataType: "text"
                    })
                }
            }
        }
    </script>
</head>
<body>
<%--获取session，若是没有登录则跳转到登录界面--%>
<%
    if (session.getAttribute("username") == null) {
%>
<%--调用下面的模态框提示登录--%>
<script>
    $(function () {
        $('#staticBackdrop').modal('show')
    });
</script>
<%
    }
%>
<!-- 模态框 -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">未登录！</h5>
                <%--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>--%>
            </div>
            <div class="modal-body">
                管理员登录之后方可管理界面
            </div>
            <div class="modal-footer">
                <a href="../login.html" type="button" class="btn btn-outline-primary">登录</a>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="">
        <img class="rounded img-fluid" src="../img/avatar.jpg" width="48" height="48" alt="个人头像">
    </a>
    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="<%=context %>/servlet/PostlistServlet?role=1"
               class="nav-link">查看文章</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/admin/addpost.jsp" class="nav-link">写文章</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/servlet/CategoryServlet?action=getall"
               class="nav-link">文章分类</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/index.html" class="nav-link">返回首页</a>
        </li>
        <li>
            <a href="javascript:scroll(0,0)" class="nav-link">回到顶部</a>
        </li>
    </ul>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card bg-light text-dark" style="margin: 2%">
                <div class="card-header"><h4>添加</h4></div>
                <div class="card-body">
                    <form class="form-inline" action="<%=context %>/servlet/CategoryEditServlet?action=add"
                          method="post">
                        <label for="sub" style="margin-right: 2px">类别名称:</label>
                        <input id="sub" type="text" class="form-control" style="margin-right: 10%" name="subcategory"
                               required>
                        <label for="select" style="margin-right: 2px">父节点:</label>
                        <select id="select" class="form-control" style="margin-right: 10%" name="maincategory">
                            <option value="0" selected="">————</option>
                            <c:forEach items="${ mainCategory }" var="maincategory">
                                <option value="${ maincategory.id }"> ${maincategory.name } </option>
                            </c:forEach>
                        </select>
                        <button type="submit" class="btn btn-outline-primary" style="float: right;">添加分类</button>
                    </form>
                </div>
            </div>
            <div class="card bg-light text-dark" style="margin: 2%">
                <div class="card-header"><h4>管理</h4></div>
                <div class="card-body">
                    <form class="form-inline" action="#" method="POST">
                        <table class="table table-hover table-bordered">
                            <thead>
                            <tr>
                                <th>分类名称</th>
                                <th>文章数</th>
                                <th>父节点</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <%--主分类--%>
                            <c:forEach items="${ mainCategory }" var="maincategory">
                                <%--输出每一个一级标签--%>
                                <tr class="table-primary">
                                    <td>${maincategory.name }</td>
                                    <td>${maincategory.main_count }</td>
                                    <td>————</td>
                                    <c:if test="${maincategory.name!='默认'}">
                                        <td>
                                            <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                                    data-target="#mainModal">修改
                                            </button>
                                            <button type="button" class="btn btn-outline-danger"
                                                    onclick="deleteCategory(${maincategory.id },${maincategory.main_count },'main')">
                                                删除
                                            </button>
                                            <input type="text" class="form-control" name="main_id"
                                                   value="${maincategory.id }"
                                                   style="display: none">
                                        </td>
                                    </c:if>
                                </tr>
                                <%--子分类--%>
                                <c:forEach items="${ subCategory }" var="subcategory">
                                    <c:forEach items="${ subcategory }" var="sub">
                                        <c:if test="${maincategory.id==sub.main_id}">
                                            <%--输出每一个一级标签对应的二级标签，判断对应的id--%>
                                            <tr class="table-success">
                                                <td>${sub.name }</td>
                                                <td>${sub.sub_count }</td>
                                                <td>${maincategory.name }</td>
                                                <c:if test="${sub.name!='默认'||maincategory.name!='默认'}">
                                                    <td>
                                                        <button type="button" class="btn btn-outline-primary"
                                                                data-toggle="modal"
                                                                data-target="#subModal">修改
                                                        </button>
                                                        <button type="button" class="btn btn-outline-danger"
                                                                onclick="deleteCategory(${sub.id },${sub.sub_count },'sub')">
                                                            删除
                                                        </button>
                                                        <input type="text" class="form-control" name="main_id"
                                                               value="${sub.main_id }"
                                                               style="display: none">
                                                        <input type="text" class="form-control" name="sub_id"
                                                               value="${sub.id }"
                                                               style="display: none">
                                                    </td>
                                                </c:if>
                                            </tr>
                                        </c:if>
                                    </c:forEach>
                                </c:forEach>
                            </c:forEach>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>

        </div>

        <%--修改主分类模态框--%>
        <div class="modal fade" id="mainModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">修改分类</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>

                    <form action="<%=context %>/servlet/CategoryEditServlet?action=update" method="post">
                        <!-- 模态框主体 -->
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="control-label">类别名称:</label>
                                <input type="text" class="form-control" name="maincategoryname" id="updatemainname">
                            </div>
                            <input type="text" class="form-control" name="main_id" id="updatemainid"
                                   style="display: none">
                        </div>
                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-outline-primary">提交修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <%--修改子分类模态框--%>
        <div class="modal fade" id="subModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">修改分类</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <form action="<%=context %>/servlet/CategoryEditServlet?action=update" method="post">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="control-label">类别名称:</label>
                                <input type="text" class="form-control" name="subcategory" id="updatesubname" required>
                            </div>
                            <div class="form-group">
                                <label class="control-label">父节点:</label>
                                <select class="form-control" name="maincategory" id="updatemain">
                                    <c:forEach items="${mainCategory }" var="maincategory">
                                        <option value="${maincategory.id }"> ${maincategory.name } </option>
                                    </c:forEach>
                                </select>
                            </div>
                            <input type="text" class="form-control" name="main_id" id="updatemainid2"
                                   style="display: none">
                            <input type="text" class="form-control" name="sub_id" id="updatesubid2"
                                   style="display: none">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-outline-primary">提交修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
            $('#mainModal').on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget); // 触发事件的按钮
                let main_name = button.parent().prev().prev().prev();
                let main_id = button.next().next();
                console.log(main_id.val());
                $('#updatemainname').val(main_name.text());
                $('#updatemainid').val(main_id.val());
            });
            $('#subModal').on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget); // 触发事件的按钮
                let sub_name = button.parent().prev().prev().prev();
                let main_id = button.next().next();
                let sub_id = button.next().next().next();
                console.log(main_id.val() + "-" + sub_id.val());
                $('#updatesubname').val(sub_name.text());
                $('#updatemainid2').val(main_id.val());
                $('#updatesubid2').val(sub_id.val());
            })
        </script>
    </div>
</div>
</body>

</html>